<style>
.multiples select{
    height:100px;
    width:200px;
}
</style>
<% form_for(@aula) do |f| %>
  <%= f.error_messages %>

  <p>
    <%= f.label :data %><br />
    <%= calendar_date_select_tag "aula[date]", @aula.date, :year_range =>  1.years.ago..0.years.since, :onchange => "setDateSelected($F(this))" %>
  </p>
  <p>
    <%= f.label :descricao %><br />
    <%= f.text_area :descricao, :rows => 5 %>
  </p>
  <p>
        <table>
            <tbody>
                <tr>
                    <td colspan="3">
                        <input type="text" id="query" autocomplete="off" value="Buscar..."/>
                    </td>
                </tr>
                <tr class="multiples">
                    <td>
                        <select id="alunos" multiple="multiple">
                        </select>
                    </td>
                    <td>
                        <a href="#" class="add">Adicionar</a>
                        <br/>
                        <a href="#" class="remove">Remover</a>
                    </td>
                    <td>
                        <select id="alunos-presentes" name="presentes[]" multiple="multiple">
                            <% @presentes.each do |p| %>
                                <option value="<%= p[:id] %>" selected="selected"><%= p[:nome] %></option>
                            <% end %>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
  </p>
  <p>
    <%= f.submit "Salvar", :class => "button" %>
  </p>
<% end %>
<%= javascript_include_tag "jquery-1.3.2.min" %>
<script type="text/javascript">
jQuery.noConflict()
with({$: jQuery}){
    $(function(){
        $('#query').focus(function(){
            $(this).val('')
        })
        $('#query').keypress(function(e){
            if(e.keyCode == 13){
                $("#alunos").html('<option value="">Carregando...</option>')
                $.getJSON("/alunos/search/" + $(this).val(), function(alunos){
                        $("#alunos").html('')
                        $.each(alunos, function(indice, aluno){
                            if(typeof(aluno.aluno) != "undefined") aluno = aluno.aluno
                            if($("#alunos-presentes option[value=" + aluno.id + "]").length == 0){
                                $("#alunos").append('<option value="' + aluno.id + '">' + aluno.nome + '</option>')
                            }
                        })
                })
                return false
            }
        })
        $('.add').click(function(){
            $("#alunos option:selected").remove().appendTo('#alunos-presentes')
            return false
        })
        $('.remove').click(function(){
            $("#alunos-presentes option:selected").remove().appendTo('#alunos')
            return false
        })
    })
}
</script>
